<template>
<div class="body-wrapper">
  <div class="index-container">
    <div class="hd-index">
      <div class="index-header">
        <a href="http://www.jshtcm.com" target="_blank" title="回到医院首页">
          <img src="../assets/logo-new.png" />
        </a>
        <div class="logon" v-if="!isLogin">
            <a href="javascript:;" title="登录" @click="dialogFormVisible = true">登录</a>
            <span>|</span>
            <router-link to="/register">注册</router-link>
          </div> 
          <div class=" fr " v-else>
            您好！{{userName}} <a href="javascript:;" @click.prevent="logout" class="logout">【退出】</a>
          </div> 
      </div>
    </div>

    <el-dialog :visible.sync="dialogFormVisible" custom-class="login-form"> 
      <login-form></login-form>
    </el-dialog>

    <div class="hd-index">
      <div class="slider-wrapper" @mouseover="mouseoverHandle" @mouseout="mouseoutHandle">
      <a href="javascript:;" class="sprites prev" @click="prev"></a>
      <a href="javascript:;" class="sprites next" @click="next"></a>
      <div class="imgs" ref="imgs">
          <img src="../assets/nav-1.png" @click="goCenter" />
          <img src="../assets/nav-2.png" @click="goCenter" />
          <img src="../assets/nav-3.png" @click="goCenter" />
          <img src="../assets/nav-4.png" @click="goCenter" />
          <img src="../assets/nav-5.png" @click="goCenter" />
          <img src="../assets/nav-6.png" @click="goCenter"  />
      </div>
      <div class="enter">
        <img src="../assets/enter.png" />
      </div>
    </div>
    </div>
  </div>
  </div>
</template>
<script>
import LoginForm from '../components/LoginForm'
// 自动轮播间隔
const SLIDE_DELAY = 3000
export default {
  name: 'Index',
  data () {
    return {
      pos: [
        {
          id: 1,
          x: 180,
          y: 80,
          opacity: .8,
          scale: .8
        },
        {
          id: 2,
          x: 480,
          y: 40,
          opacity: .6,
          scale: .6
        },
        {
          id: 3,
          x: 780,
          y: 90,
          opacity: .8,
          scale: .8
        },
        {
          id: 4,
          x: 780,
          y: 300,
          opacity: .9,
          scale: .9
        },
        {
          id: 5,
          x: 480,
          y: 350,
          opacity: 1,
          scale: 1
        },
        {
          id: 6,
          x: 180,
          y: 300,
          opacity: .9,
          scale: .9
        }
      ],
      timer: null,
      dialogFormVisible: false,
      userName: localStorage.userName
    }
  },
  components: {
    LoginForm
  },  
  computed: {
    isLogin () {
      return localStorage.accessToken !== undefined
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.reset()
      this.mouseoutHandle()
    })
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    logout () {
      localStorage.removeItem('accessToken')
      location.reload()
    },
    goCenter (e) {
      // console.log(e.target)
      if (e.target.style.opacity !== 1) {
        let curId = e.target.id.replace('img', '') / 1;
        let temp = []
        // this.pos.forEach(v => {
        //   if (v.id === curId) {
            
        //   }
        // })
        for (let i = 0, len = this.pos.length; i < len; i++) {
          i === 0 ? temp[i] = this.pos[len - 1] : temp[i] = this.pos[i - 1]
        }
        this.pos = temp
        this.reset(10)
      }
    },
    prev () {
      let temp = []
      for (let i = 0, len = this.pos.length; i < len; i++) {
        i === 0 ? temp[i] = this.pos[len - 1] : temp[i] = this.pos[i - 1]
      }
      this.pos = temp
      this.reset(10)
    },
    next () {
      let temp = []
      for (let i = 0, len = this.pos.length; i < len; i++) {
        i === (len - 1) ? temp[i] = this.pos[0] : temp[i] = this.pos[i + 1]
      }
      this.pos = temp
      this.reset(10)
    },
    reset (delay = 200) {
      let imgs = this.$refs.imgs.querySelectorAll('img')
      for (let i = 0; i < imgs.length; i++) {
        setTimeout(() => {
          imgs[i].style.left = this.pos[i].x + 'px'
          imgs[i].style.top = this.pos[i].y + 'px'
          imgs[i].style.opacity = this.pos[i].opacity
          imgs[i].style.transform = 'scale(' + this.pos[i].scale + ')'
          imgs[i].id = 'img' + this.pos[i].id
        }, delay)
      }
    },
    mouseoverHandle () {
      this.timer && clearInterval(this.timer)
    },
    mouseoutHandle () {
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(this.next, SLIDE_DELAY)
    }
  }
}
</script>
<style lang="less">
@import '../common/css/app.less';
html,
body {
  width: 100%;
  height: 100%;
}

.body-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background:url(../assets/bg.jpg) no-repeat;
  background-size: cover;
}

.index-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hd-index {
  width: 1080px;
  margin: auto;
}

.index-header {
  padding-top: 40px;
}

.slider-wrapper {
  position: relative;
  overflow: hidden;
  height: 510px;
  background: url(../assets/line.png) no-repeat center center;
  transition: margin-top .5s;
  .prev, .next{
    width: 34px;
    height: 48px;
    position: absolute;
    top: 45%;
    cursor: pointer;
    display: block;
  }
  .prev {
    background-position: -275px 0;
    left: 0;
    &:hover {
      background-position: -275px -50px;
    }
  }
  .next {
    background-position: -240px 0;
    right: 0;
    &:hover {
      background-position: -240px -50px;
    }
  }
  .imgs {
    img {
      display: block;
      position: absolute;
      width: 180px;
      height: 120px;
      top: 200px;
      left: 480px;
      transition: all 1s ease;
      border-radius: 6px;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
      cursor: pointer;
    }
  }
  .enter {
    position: absolute;
    bottom: -15px;
    left: 512px;
  }
}
@media (min-height: 900px) {
  .slider-wrapper {
    margin-top: 10%;
  }
}
</style>
